<template>
    <rx-layout>
        <div slot="center">
            <rx-fit>
<!--                <div slot="toolheader" border="false" foldbtn="false">
                    <div class="table-operator">
                        <a-button @click="deleteByIds" icon="plus" type="primary" >新建</a-button>
                    </div>
                </div>-->
                <rx-grid
                    class="rx-tree-title"
                    ref="table"
                    :bordered="true"
                    :allowRowSelect="true"
                    :multiSelect="true"
                    :columns="columns"
                    :defaultPageSize="10"
                    url="/api-system/system/core/sysApp/market/getAppInstallData"
                    :queryParam="queryParam"
                    data-field="result.data"
                    id-field="id"
                    :pageSizeOptions="['10','30','40']">
                    <span  slot="enable" class="rx-table-row-icon" slot-scope="{text,record}">
                        <span v-if="text == 'Y'" class="table-field_yes">{{i18n('form.yes','是')}}</span>
                        <span v-else class="table-field_no">{{i18n('form.no','否')}}</span>
                    </span>
                      <span  slot="free" class="rx-table-row-icon" slot-scope="{text,record}">
                        <span v-if="text == 'Y'" class="table-field_yes">{{i18n('form.yes','是')}}</span>
                        <span v-else class="table-field_no">{{i18n('form.no','否')}}</span>
                    </span>
                    <span slot="action" slot-scope="{ text, record }" class="actionIcons">
                        <span @click="deleteByIds(record)">{{$ti18('rxList.delBtn','删除')}}</span>
                  </span>
                </rx-grid>
            </rx-fit>
        </div>
    </rx-layout>
</template>

<script>
import SysAppApi from '@/api/system/core/sysApp'
import { BaseList, RxLayout,RxGrid,RxFit,Util,Dialog } from "@lowcode/jpaas-common-lib"

export default {
    name: 'TableList',
    mixins: [BaseList],
    components: {

        RxLayout,
        RxFit,
        RxGrid,
    },
    data () {
        return {
            // 表头
            columns: [
                {
                    title: this.i18n('form.appName','应用名称'),
                    width:200,
                    dataIndex: 'appName',
                    ellipsis: true
                },
                {
                    title: this.i18n('form.tenantName','租户名称'),
                    width:200,
                    dataIndex: 'tenantName',
                    ellipsis: true
                },
                {
                    title: this.i18n('form.isEnable','是否启用'),
                    width:200,
                    dataIndex: 'enable',
                    ellipsis: true,
                    scopedSlots: { customRender: 'enable' }
                },
                {
                    title: this.i18n('form.free','是否付费'),
                    width:200,
                    dataIndex: 'free',
                    ellipsis: true,
                    scopedSlots: { customRender: 'free' }
                },
                {
                    title: this.$ti18('rxList.action','操作'),
                    width:100,
                    dataIndex: 'action',
                    scopedSlots: { customRender: 'action' }
                },
            ],
            tableData:[],

        }
    },
    created() {
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "SysApp", key);
        },
        deleteByIds(app){
            let param = {
                tenantId: app.tenantId,
                appId: app.appId
            }
            console.log(app)
            let self_ = this;
            this.$confirm({
                title: self_.i18n('msa.delTenantTitle','删除确认'),
                content: self_.i18n('msa.delTenantTips1','确认删除租户') + '【' + app.tenantName + '】' + self_.i18n('msa.delTenantTips2','安装的应用') + '【' + app.appName + '】？',
                okText: self_.$ti18('rxForm.ackBtn','确认'),
                cancelText: self_.$ti18('rxForm.cancelBtn','取消'),
                onOk() {
                    SysAppApi.deleteByTenantIds(param).then(result => {
                        self_.$refs.table.loadData();
                    })
                },
            });
        },
    }
}
</script>
<style scoped>
.table-field_yes {
    background: #4ced4c;color: white;padding: 6px;border-radius: 3px;
}
.table-field_no {
    background: #d7d4d4;color: white;padding: 6px;border-radius: 3px;
}
.atbliat{
    height:calc(100% - 80px);
}
.telist{
    height: 20px;
}
.content .table-operator button {
    margin-bottom: 8px;
}
.rx-fit >>>.ant-tabs-bar{
    border-bottom: 0;
}
.ant-row >div{
    padding-right: 0px!important;
}
.rx-table-row-icon{
    overflow: hidden;
    width: auto;
    vertical-align: top;
    line-height: normal;
    margin-top: 1px;
}
.rx-tree-icon{
    display: inline-block;
    float: left;
    font-size: 16px;
    margin-right: 4px;
}
.rx-tree-title{
    white-space: normal;
    overflow: hidden;
}
*>>>.rx-gridBox  .ant-table-row-cell-break-word .ant-table-row-indent,
*>>>.rx-gridBox  .ant-table-row-cell-break-word  .ant-table-row-expand-icon{
    float: left;
    margin-top: 3px;
}
</style>